<template>
    <div class="kmsView">
        <div class="viewVideo">
            <video autoplay muted playsinline></video>
        </div>
        <div class="viewTitle">{{viewTitle}}</div>
        <div class="viewTools">
            <a href="#" class="acItem"><i class="fa fa-camera"></i></a>
            <a href="#" class="acItem"><i class="fa fa-tv"></i></a>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                viewTitle: '这里是标题',
            };
        },
    }
</script>

<style lang="less" scoped>
    .kmsView{
        width: 100%;
        height: 100%;
        position: relative;
        background-color: #222;
        color: #fff;
        .viewVideo{
            width: 100%;
            height: 100%;
            position: relative;
            video{
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }
        }
        .viewTitle{
            position: absolute;
            left: 10px;
            top: 10px;
            padding: 5px 10px;
            background-color: rgba(0,0,0,0.5);
            font-size: 0.85em;
            font-weight: bold;
        }
        .viewTools{
            position: absolute;
            left: 10px;
            bottom: 10px;
            padding: 0;
            //background-color: rgba(0,0,0,0.5);
            display: flex;
            .acItem{
                padding: 0px;
                height: 32px;
                line-height: 32px;
                width: 32px;
                text-align: center;
            }
        }
    }
</style>